<template>
	<el-dialog v-model="state.dialogVisible" draggable :close-on-click-modal="false" :width="state.width + 8 + 'mm'">
		<div id="preview_content" ref="previewContentRef"></div>
		<template #footer>
			<el-button type="primary" icon="ele-Printer" @click.stop="generatePDF">生成PDF</el-button>
			<el-button :loading="state.waitShowPrinter" type="primary" icon="ele-Printer" @click.stop="print">直接打印</el-button>
			<el-button type="primary" icon="ele-Printer" @click.stop="toPdf">{{$t('message.pageConfiguration.exportPDF')}}</el-button>
			<el-button key="close" @click="hideDialog"> {{$t('message.pageConfiguration.close')}} </el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue';
import html2pdf from 'html2pdf.js';
const state = reactive({
	dialogVisible: false,
	waitShowPrinter: false,
	width: 0, // 纸张宽 mm
	printData: {}, // 打印数据
	hiprintTemplate: {} as any,
});
// 生成PDF
const generatePDF = async () => {
	// 获取要生成 PDF 的 div 元素
	const targetDiv = document.getElementById('preview_content'); // 替换为你的实际 div ID
 
	if (!targetDiv) {
		return;
	}

	 

	// 设置生成的 PDF 文件名
	const filename = 'aaa.pdf'; // 替换为你想要的文件名

	// 设置 html2pdf 的选项
	const options = {
		filename,
		margin: 2, // 设置页面边距
		image: { type: 'jpeg', quality: 0.98 }, // 设置图片质量
		html2canvas: { scale: 2 }, // 设置 html2canvas 的缩放比例
		jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }, // 设置 jsPDF 的选项
		pagebreak: { mode: 'avoid-all' },
	};

	// 使用 html2pdf 将 div 转换为 PDF
	html2pdf().set(options).from(targetDiv).save();

	// 生成完毕后还原样式
	setTimeout(() => { 
	}, 1000);

	// html2pdf(targetDiv, options)
	// 	.then((pdf) => {
	// 		// 生成完毕后还原样式
	// 		elementToHide.style.display = '';
	// 		// 生成 PDF 成功后，打开打印对话框
	// 		if (pdf) {
	// 			pdf.output('dataurlnewwindow');
	// 		} else {
	// 			console.error('Generated PDF is undefined');
	// 		}
	// 	})
	// 	.catch((error) => {
	// 		console.error('Error generating PDF:', error);
	// 		// 在错误处理中也要还原样式
	// 		elementToHide.style.display = '';
	// 	});
};
const previewContentRef = ref();

const showDialog = (hiprintTemplate: any, printData: {}, width = 210) => {
	state.dialogVisible = true;
	state.width = width;
	state.hiprintTemplate = hiprintTemplate;
	state.printData = printData;
	nextTick(() => {
		while (previewContentRef.value?.firstChild) {
			previewContentRef.value.removeChild(previewContentRef.value.firstChild);
		}
		const newHtml = hiprintTemplate.getHtml(printData);
		previewContentRef.value.appendChild(newHtml[0]);
	});
};

const print = () => {
	state.waitShowPrinter = true;
	state.hiprintTemplate.print(
		state.printData,
		{},
		{
			callback: () => {
				state.waitShowPrinter = false;
			},
		}
	);
};

const toPdf = () => {
	console.log(state.printData)

	state.hiprintTemplate.toPdf(state.printData,'PDF');
};

const hideDialog = () => {
	state.dialogVisible = false;
};

defineExpose({ showDialog });
</script>

<style lang="less" scoped>
:deep(.ant-modal-body) {
	padding: 0px;
}

:deep(.ant-modal-content) {
	margin-bottom: 24px;
}
:deep(.hiprint-printElement.hiprint-printElement-html)
{
	position: relative  !important;
	height: auto !important;
}
</style>
